<template>
	<div id="TweetList">
		<x-header :left-options="{showBack: false}" title="推文列表" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="tweet" v-for="item in article_list">
			<router-link to="TweetList">
				<div class="title-wrap">
					<h2>{{item.article_title}}</h2>
				</div>
			</router-link>
			<router-link :to="'Tweets/article_id/' + item.article_id">
				<div class="content">
					<img class="photo" :src="'/los' + item.article_thumb" alt="" />
					<div class="desc">
						<div class="intro">
							<!--{{expert_headimg}}-->
							<!--<img :src="'/los' + item.expert_headimg" alt="" />-->
							<span>{{item.article_author}} </span>
							<span class="timer">{{timer2time(item.add_time)}}</span>
							<div class="look">
								<span>浏览{{item.article_count}}次</span>
							</div>
						</div>
					</div>
				</div>
			</router-link>
		</div>
		<div class="list" v-for="item in hot_list">
			<router-link :to="'Tweets/article_id/' + item.article_id">
				<div class="left">
					<h2>{{item.article_title}}</h2>
					<div class="intro">
						<span>{{item.article_author}} </span>
						<span class="timer">{{timer2time(item.add_time)}}</span>
						<div class="look">
							<span>浏览{{item.article_count}}次</span>
						</div>
					</div>
				</div>
				<div class="right">
					<!--:src="'/los/uploads/thumb/goods/' + item.goods_id + '_109X109.jpeg'"-->
					<img :src="'/los' + item.article_thumb" alt="" />
				</div>
			</router-link>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	export default {
		data() {
			return {
				article_list: [],
				hot_list: []
			}
		},
		components: {
			XHeader
		},
		mounted() {
			//将时间戳转换成日期的封装函数
			Date.prototype.Format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		activated() {
			this.getRecArticle();
			this.getHotArticle();
		},
		methods: {
			getRecArticle: function() {
				this.$http({
					mathod: 'GET',
					url: '/los/api/article/rec_list.json?category_id=715',
					data: ''
				}).then((result) => {
					this.article_list = result.data.article_list;
				}).catch((err) => {

				})
			},
			getHotArticle: function() {
				this.$http({
					mathod: 'GET',
					url: '/los/api/article/hot_list.json?category_id=715',
					data: ''
				}).then((result) => {
					this.hot_list = result.data.article_list;
				}).catch((err) => {

				})
			},
			back: function() {
				window.history.go(-1);
			},
			//将时间戳转换成日期
			timer2time: function(time) {
				return new Date(parseInt(time) * 1000).Format("yyyy-MM-dd hh:mm:ss");
			}
		}
	}
</script>

<style scoped>
	#TweetList {
		background: #fff;
		width: 100%;
	}
	
	.header {
		background: #fff;
	}
	
	.tweet {
		/*margin: 0.26rem 0;*/
		background: #fff;
		position: relative;
	}
	
	.tweet:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.tweet .title-wrap {
		line-height: 1.17rem;
		height: 1.17rem;
		width: 100%;
		padding: 0 0.26rem;
		overflow: hidden;
	}
	
	.tweet .title-wrap h2 {
		float: left;
		font-size: 0.4rem;
		font-size: 0.45rem;
	}
	
	.tweet .title-wrap .right {
		float: right;
		line-height: 1.17rem;
	}
	
	.tweet .title-wrap .right span {
		font-size: 0.32rem;
		color: #777;
	}
	
	.tweet .title-wrap .right img {
		width: 0.32rem;
		height: 0.32rem;
		margin-left: 0.21rem;
	}
	
	.tweet .content {
		padding: 0 0.26rem 0.26rem;
	}
	
	.tweet .content .photo {
		height: 4.1rem;
		width: 100%;
		border-radius: 0.1rem;
	}
	
	.tweet .content .desc {
		padding: 0.26rem 0;
	}
	
	.tweet .content .desc p {
		width: 100%;
		font-size: 0.37rem;
		color: #333;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.tweet .content .desc .intro {
		overflow: hidden;
		margin-top: 0.26rem;
		line-height: 0.53rem;
		height: 0.53rem;
		font-size: 0.32rem;
	}
	
	.intro .timer {
		margin-left: 0.26rem;
	}
	
	.tweet .content .desc .intro img {
		width: 0.42rem;
		height: 0.42rem;
		border-radius: 50%;
		float: left;
	}
	
	.tweet .content .desc .intro span {
		float: left;
		font-size: 0.32rem;
		color: #aaa;
	}
	
	.tweet .content .desc .intro b {
		font-weight: normal;
		float: left;
		margin-left: 0.26rem;
		color: #999;
	}
	
	.tweet .content .desc .intro .look {
		float: right;
		overflow: hidden;
	}
	
	.tweet .content .desc .intro .look i {
		float: left;
	}
	
	.tweet .content .desc .intro .look span {
		font-size: 0.29rem;
		color: #777;
	}
	
	.list {
		width: 100%;
		height: 2.98rem;
		padding: 0.26rem;
		background: #fff;
	}
	
	.list .left {
		width: 6.42rem;
	}
	
	.list .left h2 {
		height: 1.09rem;
		line-height: 0.54rem;
		overflow: hidden;
		font-size: 0.45rem;
	}
	
	.list .left .intro {
		margin-top: 0.8rem;
		overflow: hidden;
		color: #aaa;
		font-size: 0.32rem;
	}
	
	.list .left .intro img {
		width: 0.42rem;
		height: 0.42rem;
		border-radius: 50%;
		margin-right: 0.13rem;
		float: left;
	}
	
	.list .left .intro .look {
		float: right;
	}
	
	.list .right {
		width: 2.5rem;
	}
	
	.list .right img {
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 0.1rem;
	}
</style>